<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<body class="hold-transition skin-blue sidebar-mini">

<!--库存在库模态框-->
<div class="modal fade" id="modal-selectStock">
    <div class="modal-dialog" style="width: 1350px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">选择盘点明细</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="box">
                            <div class="box-header">
                                <form id="queryStockForm">
                                    <div class="row">
                                        <div class="form-inline">
                                            <div class="form-group">
                                                <label>原料类型</label>
                                                <input type="text" name="matTypeName"
                                                       class="form-control"
                                                       placeholder="请输入原料类型">
                                            </div>
                                            <div class="form-group">
                                                <label>原料材质</label>
                                                <input type="text" name="matQualityName" class="form-control"
                                                       placeholder="请输入原料材质">
                                            </div>
                                            <div class="form-group">
                                                <label>原料规格</label>
                                                <input type="text" name="matSpecName" class="form-control"
                                                       placeholder="请输入原料规格">
                                            </div>
                                            <div class="form-group">
                                                <label>宽度</label>
                                                <input type="number" step="0.1" name="matWidth" class="form-control"
                                                       placeholder="请输入原料宽度">
                                            </div>
                                            <div class="form-group">
                                                <label>长度</label>
                                                <input type="number" step="0.1" name="matLength" class="form-control"
                                                       placeholder="请输入原料长度">
                                            </div>
                                            <div class="form-group">
                                                <label>米重/厚度</label>
                                                <input type="number" step="0.1" name="matHeight" class="form-control"
                                                       placeholder="请输入原料米重/厚度">
                                            </div>
                                            <button type="button" class="btn btn-success" id="btn-selectStock">搜索
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="box-body">
                                <table id="bootstrap-stock-table">
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer" style="padding-top: 5px;">
                <button type="button" class="btn btn-info" id="btn-selectStock-commit">确定</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<section class="content-header">
    <h1>
        添加盘点明细&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-size: 19px;">计划编号：</span><span style="font-size: 19px;"
                                                                                       th:text="${checkPlan.cpnCode}"></span>
        <input type="hidden" id="cpnId" name="cpnId" class="form-control" th:value="${checkPlan.cpnId}">
    </h1>
</section>
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <form id="queryForm">
                        <div class="row">
                            <div class="form-inline">
                                <div class="form-group">
                                    <label>原料类型</label>
                                    <input type="text" name="matTypeName"
                                           class="form-control"
                                           placeholder="请输入原料类型">
                                </div>
                                <div class="form-group">
                                    <label>原料材质</label>
                                    <input type="text" name="matQualityName" class="form-control"
                                           placeholder="请输入原料材质">
                                </div>
                                <div class="form-group">
                                    <label>原料规格</label>
                                    <input type="text" name="matSpecName" class="form-control"
                                           placeholder="请输入原料规格">
                                </div>
                                <div class="form-group">
                                    <label>宽度</label>
                                    <input type="number" step="0.1" name="matWidth" class="form-control"
                                           placeholder="请输入原料宽度">
                                </div>
                                <div class="form-group">
                                    <label>长度</label>
                                    <input type="number" step="0.1" name="matLength" class="form-control"
                                           placeholder="请输入原料长度">
                                </div>
                                <div class="form-group">
                                    <label>米重/厚度</label>
                                    <input type="number" step="0.1" name="matHeight" class="form-control"
                                           placeholder="请输入原料米重/厚度">
                                </div>
                                <button type="button" class="btn btn-success" id="btn_search">搜索</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div id="toolbar1" class="row">
                    <button shiro:hasPermission="matinv:matcheckadd:edit" type="button"
                            class="btn btn-info"
                            id="btn-addPlanDetail"
                            th:style="'display:' + @{(${checkPlan.cpnStatus}==1 ? 'inline-block' : 'none')} + ''">
                        添加盘点明细
                    </button>
                </div>
                <div class="box-body">
                    <table id="bootstrap-table"></table>
                </div>
            </div>
        </div>
    </div>
</section>
<div th:include="include :: footer"></div>
<script th:inline="javascript">

    /** 加载表格 */
    var table1, table2;

    /** 删除盘点明细 */
    function del(id) {
        js.modal.confirm("确定删除盘点计划明细吗？", function (result) {
            js.post({
                url: ctx + "material/checkPlan/del",
                data: {
                    cdlId: id
                },
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        js.modal.success(result.msg);
                        js.table.refresh(table1);
                    }
                    js.modal.closeLoading();
                }
            })
        })
    }

    /** 获取待盘点明细（模态框数据源）*/
    function openInventoryList() {
        table2 = js.table.init({
            id: "bootstrap-stock-table",
            url: ctx + "material/checkPlan/inventoryList",
            pageSize: 300,
            showExport: false,
            queryData: {cpnId: $("#cpnId").val()},
            queryForm: "queryStockForm",
            columns: [
                {
                    field: "checked",
                    title: '全选',
                    checkbox: true
                },
                {title: '分类', field: 'materialKind'},
                {title: '类型', field: 'matTypeName'},
                {title: '材质', field: 'matQualityName'},
                {title: '规格', field: 'matSpecName'},
                {title: '宽度', field: 'matWidth'},
                {title: '长度', field: 'matLength'},
                {title: '米重/厚度', field: 'matHeight'},
                {title: '数量', field: 'cdlBeforeNum'},
                {title: '理论重量', field: 'cdlBeforeWeight'},
                {title: '库位', field: 'matStockName'}
            ]
        });
    }

    $(function () {

        /** 加载列表 */
        table1 = js.table.init({
            url: ctx + "material/checkPlan/planDetailList",
            pageSize: 300,
            toolbar: '#toolbar1',
            showExport: false,
            queryData: {cpnId: $("#cpnId").val()},
            columns: [
                {
                    title: '序号', field: '', width: '50',
                    formatter: function (value, row, index, field) {
                        return index + 1;
                    }
                },
                {title: '分类', field: 'materialKind'},
                {title: '类型', field: 'matTypeName'},
                {title: '材质', field: 'matQualityName'},
                {title: '规格', field: 'matSpecName'},
                {title: '宽度', field: 'matWidth'},
                {title: '长度', field: 'matLength'},
                {title: '米重/厚度', field: 'matHeight'},
                {title: '数量', field: 'cdlBeforeNum'},
                {title: '理论重量', field: 'cdlBeforeWeight'},
                {title: '库位', field: 'matStockName'},
                {
                    title: '操作', width: '80',
                    formatter: function (value, row, index) {
                        var actions = [];
                        if (hasP("matinv:matcheckadd:edit") && row.cpnStatus === 1) {
                            actions.push('<a style="margin-right: 5px" class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="del(' + row.cdlId + ')"> 删除</a>');
                        }
                        return actions.join('');
                    }
                }
            ]
        });

        /** 表格搜索 */
        $("#btn_search").click(function () {
            js.table.search(table1);
        });

        /** 打开待盘点库存模态框 */
        $("#btn-addPlanDetail").on('click', function () {
            openInventoryList();
            js.modal.open("modal-selectStock")
        });

        /** 表格搜索待盘点库存 */
        $("#btn-selectStock").click(function () {
            js.table.search(table2);
        });

        /** 关闭待盘点库存模态框 */
        js.modal.hideEvent("modal-selectStock", function () {
            js.table.destroy(table2);
            js.reset("queryStockForm");
        });

        /** 添加盘点明细 */
        $("#btn-selectStock-commit").click(function () {

            var rows = js.table.selectRows("bootstrap-stock-table");

            // 如果没有选择，显示提示信息
            if (rows.length == 0) {
                js.modal.warning("请至少选择一条明细");
                return false;
            } else {
                js.post({
                    url: ctx + "material/checkPlan/addPlanDetail",
                    contentType: "application/json",
                    data: JSON.stringify(rows),
                    success: function (result) {
                        js.modal.hide("modal-selectStock");
                        js.modal.success(result.msg);
                        js.table.refresh(table1);
                        js.table.refresh(table2);
                    }
                })
            }
        });

    })

</script>
</body>
</html>